<template>
  <div class="login">
    <div class="login-box">
      <Tabs :animated="false" class="login-tabs" value="登录">
        <TabPane label="登录" name="登录">
          <div class="password-login">
            <Form :model="loginForm" :label-width="0" ref="formValidate">
              <div class="form-item-row">
                <FormItem label>
                  <Input
                    v-model="loginForm.mobile"
                    placeholder="手机号"
                    :maxlength="11"
                    type="tel"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row" v-if="!isCodeLogin">
                <FormItem label class="form-item">
                  <Input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入密码"
                    password
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row code-row" v-if="isCodeLogin">
                <FormItem label class="form-item">
                  <Input
                    v-model="loginForm.mobileCode "
                    type="tel"
                    :maxlength="6"
                    placeholder="请输入短信验证码"
                    class="form-input2"
                  ></Input>
                  <Button
                    class="save-btn-green ml12"
                    @click="sendsms1"
                    :disabled="dis1"
                  >{{codeText1}}</Button>
                </FormItem>
              </div>
              <div class="form-item-row2 flex-box">
                <Button class="save-btn-green login-btn" @click="login">马上登录</Button>
              </div>
              <div class="form-item-row2 flex-box">
                <a
                  href="javascript:"
                  class="login-type"
                  @click="changeLoginType"
                  v-if="!isCodeLogin"
                >切换验证码登录</a>
                <a
                  href="javascript:"
                  class="login-type"
                  @click="changeLoginType"
                  v-if="isCodeLogin"
                >切换密码登录</a>
              </div>
            </Form>
          </div>
        </TabPane>
        <TabPane label="注册" name="注册">
          <div class="register-box">
            <Form
              :model="registerForm"
              :label-width="0"
              ref="registerValidate"
              :rules="registerRule"
            >
              <div class="form-item-row">
                <FormItem label prop="name">
                  <Input
                    v-model="registerForm.company_name"
                    placeholder="企业名称"
                    :maxlength="50"
                    type="text"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row" prop="industry_type">
                <FormItem label>
                  <Cascader
                    :data="industry"
                    class="form-input"
                    placeholder="行业类型"
                    v-model="industry_type"
                  ></Cascader>
                </FormItem>
              </div>
              <div class="form-item-row form-item-row-personnel_size" style="text-align:left">
                <FormItem label prop="personnel_size">
                  <Select
                    v-model="registerForm.personnel_size"
                    class="form-input"
                    placeholder="人员规模"
                  >
                    <Option
                      v-for="item in personnelList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </div>
              <div class="form-item-row">
                <FormItem label>
                  <Input
                    v-model="registerForm.name"
                    placeholder="请输入姓名"
                    :maxlength="11"
                    type="text"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row">
                <FormItem prop="mobile">
                  <Input
                    v-model="registerForm.mobile"
                    placeholder="请输入手机号"
                    :maxlength="11"
                    type="tel"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row">
                <FormItem prop="password">
                  <Input
                    v-model="registerForm.password"
                    placeholder="请输入密码"
                    :maxlength="20"
                    type="password"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row">
                <FormItem prop="password">
                  <Input
                    v-model="registerForm.password2"
                    placeholder="再次输入相同的密码"
                    :maxlength="20"
                    type="password"
                    class="form-input"
                    @on-blur="pass2"
                  ></Input>
                </FormItem>
              </div>
              <div class="form-item-row code-row">
                <FormItem label class="form-item" prop="mobileCode">
                  <Input
                    v-model="registerForm.mobileCode "
                    type="tel"
                    :maxlength="6"
                    placeholder="请输入短信验证码"
                    class="form-input2"
                  ></Input>
                  <Button class="save-btn-green ml12" @click="sendsms" :disabled="dis">{{codeText}}</Button>
                </FormItem>
              </div>

              <div class="form-item-row2 flex-box">
                <Button class="save-btn-green login-btn" @click="register">注册</Button>
              </div>
            </Form>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import http from "@/utils/http";
export default {
  data() {
    return {
      codeText1: "获取验证码",
      codeText: "获取验证码",
      dis1: false,
      dis: false,
      timer1: null,
      timer: null,
      count1: "",
      isCodeLogin: false,
      loginForm: {
        mobile: "",
        mobileCode: "",
        password: "",
      },
      registerForm: {
        mobile: "",
        mobileCode: "",
        name: "",
        company_name: "",
        industry_type: "",
        personnel_size: "",
        password: "",
        password2: "",
      },
      industry_type: [],
      personnelList: [
        {
          id: "0",
          value: "10人以下",
        },
        {
          id: "0",
          value: "10-19人",
        },
        {
          id: "0",
          value: "20-99人",
        },
        {
          id: "0",
          value: "100-500人",
        },
        {
          id: "0",
          value: "500-999人",
        },
        {
          id: "0",
          value: "1000-4999人",
        },
        {
          id: "0",
          value: "5000-9999人",
        },
        {
          id: "1",
          value: "100000以上",
        },
      ],
      industry: [
        {
          label: "互联网",
          value: "互联网",
          children: [
            { label: "电商", value: "电商" },
            { label: "游戏娱乐", value: "游戏娱乐" },
            { label: "软件和企业服务", value: "软件和企业服务" },
            { label: "硬件设施服务", value: "硬件设施服务" },
            { label: "其他软件服务", value: "其他软件服务" },
            { label: "其他互联网", value: "其他互联网" },
          ],
        },
        {
          label: "制造业",
          value: "制造业",
          children: [
            { label: "机械/电子", value: "机械/电子" },
            { label: "服装/纺织", value: "服装/纺织" },
            { label: "汽车制造", value: "汽车制造" },
            { label: "金属制品", value: "金属制品" },
            { label: "食品/饮料", value: "食品/饮料" },
            { label: "家具/家纺", value: "家具/家纺" },
            { label: "重工制造", value: "重工制造" },
            { label: "家电/数码", value: "家电/数码" },
            { label: "橡胶/塑料", value: "橡胶/塑料" },
            { label: "日用品/化妆品", value: "日用品/化妆品" },
            { label: "化学原料制品", value: "化学原料制品" },
            {
              label: "文教/工美/体育/娱乐用品",
              value: "文教/工美/体育/娱乐用品",
            },
            { label: "烟酒/茶", value: "烟酒/茶" },
            { label: "非金属矿物", value: "非金属矿物" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "批发/零售",
          value: "批发/零售",
          children: [
            { label: "批发", value: "批发" },
            { label: "零售", value: "零售" },
            { label: "超市/便利店/百货商场", value: "超市/便利店/百货商场" },
            { label: "进出口", value: "进出口" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "服务业",
          value: "服务业",
          children: [
            { label: "餐饮", value: "餐饮" },
            { label: "酒店/住宿", value: "酒店/住宿" },
            { label: "旅游", value: "旅游" },
            { label: "中介服务", value: "中介服务" },
            { label: "居民服务", value: "居民服务" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "文化/体育/娱乐业",
          value: "文化/体育/娱乐业",
          children: [
            { label: "文化/体育", value: "文化/体育" },
            { label: "娱乐", value: "娱乐" },
            { label: "新闻传媒", value: "新闻传媒" },
            { label: "广告", value: "广告" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "建筑/房地产",
          value: "建筑/房地产",
          children: [
            { label: "建筑业", value: "建筑业" },
            { label: "建材装修", value: "建材装修" },
            { label: "房地产", value: "房地产" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "教育",
          value: "教育",
          children: [
            { label: "学前教育", value: "学前教育" },
            { label: "小学教育", value: "小学教育" },
            { label: "初中等教育", value: "初中等教育" },
            { label: "高等教育", value: "高等教育" },
            { label: "培训机构", value: "培训机构" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "运输/物流/仓储",
          value: "运输/物流/仓储",
          children: [
            { label: "物流/仓储", value: "物流/仓储" },
            { label: "道路/铁路运输", value: "道路/铁路运输" },
            { label: "邮政/快递", value: "邮政/快递" },
            { label: "航空运输", value: "航空运输" },
            { label: "水上运输", value: "水上运输" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "医疗",
          value: "医疗",
          children: [
            { label: "医院/医疗机构", value: "医院/医疗机构" },
            { label: "医疗器械", value: "医疗器械" },
            { label: "医药制造", value: "医药制造" },
            { label: "医药流通", value: "医药流通" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "政府",
          value: "政府",
          children: [
            { label: "党政机关", value: "党政机关" },
            { label: "国家行政机构", value: "国家行政机构" },
            { label: "检察院/法院/公安", value: "检察院/法院/公安" },
            { label: "民政/人社/交通/卫生", value: "民政/人社/交通/卫生" },
            {
              label: "发改委/经信委/商务局/统计局",
              value: "发改委/经信委/商务局/统计局",
            },
            { label: "国土/规划", value: "国土/规划" },
            {
              label: "税务/海关/工商/环保/物价/药品",
              value: "税务/海关/工商/环保/物价/药品",
            },
            { label: "地方政府", value: "地方政府" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "金融",
          value: "金融",
          children: [
            { label: "保险", value: "保险" },
            { label: "银行", value: "银行" },
            { label: "证券/投资/基金", value: "证券/投资/基金" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "商业服务/租赁",
          value: "商业服务/租赁",
          children: [
            { label: "会计审计服务", value: "会计审计服务" },
            { label: "人力资源服务", value: "人力资源服务" },
            { label: "管理咨询服务", value: "管理咨询服务" },
            { label: "法律服务", value: "法律服务" },
            { label: "知识产权服务", value: "知识产权服务" },
            { label: "安全保护服务", value: "安全保护服务" },
            { label: "其他商业服务", value: "其他商业服务" },
            { label: "机械设备租赁", value: "机械设备租赁" },
            { label: "文化用品租赁", value: "文化用品租赁" },
            { label: "其他租赁", value: "其他租赁" },
          ],
        },
        {
          label: "能源/采矿",
          value: "能源/采矿",
          children: [
            {
              label: "电力/热力/燃气/水供应业",
              value: "电力/热力/燃气/水供应业",
            },
            { label: "石油/天然气", value: "石油/天然气" },
            { label: "煤炭", value: "煤炭" },
            { label: "有色金属", value: "有色金属" },
            { label: "钢铁", value: "钢铁" },
            { label: "其他", value: "其他" },
          ],
        },
        {
          label: "农林渔牧",
          value: "农林渔牧",
          children: [{ label: "农林渔牧", value: "农林渔牧" }],
        },
        {
          label: "其他",
          value: "其他",
          children: [
            { label: "科学研究", value: "科学研究" },
            { label: "社会组织", value: "社会组织" },
            { label: "水利和环境管理", value: "水利和环境管理" },
            { label: "国际组织", value: "国际组织" },
            { label: "其他", value: "其他" },
          ],
        },
      ],
      registerRule: {
        name: [
          {
            required: false,
            message: "",
            trigger: "blur",
          },
        ],
        industry_type: [
          {
            required: false,
          },
        ],
        personnel_size: [
          {
            required: false,
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,

            message: "密码不能为空",
            trigger: "blur",
          },
        ],
        password2: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
        mobileCode: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    register(e) {
      let _this = this;
      let _industry_type = this.industry_type.join("/");
      this.registerForm.industry_type = _industry_type;
      this.$refs["registerValidate"].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("login/register", this.registerForm)
            .then((res) => {
              if (res.e !== "9999") {
                _this.$Message.error(res.m);
              }else {
                _this.$Message.success(res.m);
                setTimeout(() => {
                  _this.$router.push("/personnel");
                }, 1000);
              }
            });
        } else {
          // this.$Message.error('Fail!');
        }
      });
    },
    sendsms1() {
      const num = 60;
      if (!this.timer1) {
        this.count1 = num;
        this.dis1 = true;

        //
        if (!this.loginForm.mobile) {
          this.$Message.error("请先填写手机号");
          this.clearTimer1();
          return;
        }

        // 请求接口，并开始计时
        this.$store
          .dispatch("login/sendsms", { mobile: this.loginForm.mobile })
          .then((res) => {
            console.log(res);
            if (res.e !== "9999") {
              this.clearTimer1();
            }
          })
          .catch((e) => {
            this.clearTimer1();
          });

        // 倒计时
        this.timer1 = setInterval(() => {
          if (this.count1 > 0 && this.count1 <= num) {
            this.count1--;
            this.codeText1 = this.count1 + "s后重新获取";
          } else {
            this.clearTimer1();
          }
        }, 1000);
      }
    },
    clearTimer1() {
      clearInterval(this.timer1);
      this.dis1 = false;
      this.codeText1 = "获取验证码";
      this.timer1 = null;
    },
    sendsms() {
      const num = 60;
      if (!this.timer) {
        this.count = num;
        this.dis = true;

        //
        if (!this.registerForm.mobile) {
          this.$Message.error("请先填写手机号");
          this.clearTimer();
          return;
        }

        // 请求接口，并开始计时
        this.$store
          .dispatch("login/sendsms", { mobile: this.registerForm.mobile })
          .then((res) => {
            console.log(res);
            if (res.e !== "9999") {
              this.clearTimer();
            }
          })
          .catch((e) => {
            this.clearTimer();
          });

        // 倒计时
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= num) {
            this.count--;
            this.codeText = this.count + "s后重新获取";
          } else {
            this.clearTimer();
          }
        }, 1000);
      }
    },
    clearTimer() {
      clearInterval(this.timer);
      this.dis = false;
      this.codeText = "获取验证码";
      this.timer = null;
    },

    // 登录
    login() {
      let _this = this;
      http
        .post("/api/login", { data: this.loginForm, params: {} })
        .then((res) => {
          console.log("login res", res);
          if (res.e == "9999") {
            let returnUrl = this.$tools.getUrlQuery("returnUrl");
            let targetPath = returnUrl;
            _this.$Message.success(res.m);
            _this.$tools.cookie.set("token", res.data.token);
            setTimeout(() => {
              if (targetPath) {
                location.href = targetPath;
              } else {
                _this.$router.push("/personnel");
              }
            }, 1000);
          } else {
            _this.$Message.error(res.m);
          }
        });
    },

    pass2() {
      if (this.registerForm.password2 != this.registerForm.password) {
        this.$Message.error("请保持两次输入的密码一致");
      }
    },
    changeLoginType() {
      if (this.isCodeLogin) {
        this.isCodeLogin = false;
      } else {
        this.isCodeLogin = true;
      }
    },
  },
  mounted() {
    // let token =  this.$tools.cookie.get("token");
    // if(!token){
    //   this.$router.push('/login')
    // }
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(to bottom, #f8f8f9, #f6f6f6);
}
.login-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: url(../assets/images/loginbg.png) bottom no-repeat;
  background-color: white;
  box-shadow: 0 15px 30px rgba(0, 35, 3, 0.08);
  border-radius: 4px;
  transition: height 0.2s;
  min-height: 450px;
}
.login-btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 20px;
  height: 40px;
  background: linear-gradient(to right, #1ccf82, #0bb27a);
  box-shadow: 0 8px 12px rgba(0, 35, 3, 0.08);
  border-radius: 20px;
  font-size: 14px;
}
.password-login,
.register-box {
  margin-top: 50px;
}
.form-item-row {
  align-items: center;
  justify-content: center;
}
.login-type {
  width: 300px;
  text-align: right;
  margin: 20px auto 0 auto;
}
.code-row {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  .form-item {
    width: 100%;
  }
  .ivu-form-item-content {
    width: 100%;
    justify-content: space-between;
  }
  .form-item-row-personnel_size {
    text-align: left;
  }
}
</style>